<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资源管理</el-breadcrumb-item>
            <el-breadcrumb-item>资源列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <el-col>
                <el-input style="width: 300px;" placeholder="请输入文章id" class="input-with-select" v-model="queryInfo.query" clearable @clear="getArticle">
                    <template #append>
                        <el-button @click="selectList">搜索</el-button>
                    </template>
                </el-input>
            </el-col>

            <el-table v-loading="loading" :data="resourcesList" stripe border style="width: 100%;" highlight-current-row size="small">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="id" label="资源id" width="190"></el-table-column>
                <el-table-column prop="name" label="资源名称" width="130" ></el-table-column>
                <el-table-column prop="introduction" label="资源简介" width="180"></el-table-column>
                <el-table-column prop="url" label="资源地址" width="140"></el-table-column>
                <el-table-column prop="tag" label="资源标签" width="90"></el-table-column>
                <el-table-column prop="modify_time" label="修改时间" width="170"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" @click="getResourcesDetail(scope.row)" icocircle>详&nbsp;&nbsp;情</el-button>
                        <el-button type="success" @click="resourcesPass(scope.row)">通&nbsp;&nbsp;过</el-button>
                        <el-button type="warning" @click="resourcesFail(scope.row)">不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
<!--            分页-->
            <el-pagination
                v-model:currentPage=queryInfo.pageNum
                v-model:page-size=queryInfo.pageSize
                :page-sizes="[2, 5, 10, 20]"
                small="false"
                :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper"
                :total=queryInfo.total
                background>
            </el-pagination>

            <el-dialog
                title="资源详情"
                v-model="dialogVisible"
                width="40%" >
                <span style="height: 200px;">
                    <p style="line-height: 5px; font-size: 16px;"><a :href="resourcesDetail.url">资源地址</a></p>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>

    </div>
</template>

<script>
import API from "@/network/resources";

export default {
    created() {
        this.getResourcesList()
    },
    data(){
        return {
            resourcesList: [],
            queryInfo:{         //分页数据
                pageNum: 1,
                pageSize: 2,
                total: 0,
                query:'',
            },
            dialogVisible: false,
            resourcesDetail: {},
        }
    },
    methods:{
        getResourcesList(){
            API.GetResources(this.queryInfo.pageNum).then(res=>{
                console.log(res)
                this.resourcesList = res.data.data.data
                this.queryInfo.pageNum = res.data.data.current_page
                this.queryInfo.pageSize = res.data.data.pageSize
                this.queryInfo.total = res.data.data.total
            })
        },
        selectList(){
            this.resourcesList = this.resourcesList.filter(item => item.id === this.queryInfo.query)
        },
        getResourcesDetail(scope){
            this.dialogVisible = true
            this.resourcesDetail = scope
        },
        resourcesPass(scope){
            API.ResourcesPass(scope.id).then(res => {
                console.log(scope.id)
                if(res.data.code === 400){
                    this.$message({
                        type: 'error',
                        message: '提交失败'
                    });
                }else{
                    this.$message({
                        type: 'success',
                        message: '提交成功'
                    });
                }
                //console.log(res)
                this.getResourcesList()
            })
        },
        resourcesFail(scope){
            this.$prompt('请输入审核意见','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                API.ResourcesFail(scope.id,value).then(res=> {
                    console.log(res)
                    if(res.data.code === 400){
                        this.$message({
                            type: 'error',
                            message: '提交失败'
                        });
                    }else{
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                    }
                    this.getResourcesList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        }
    }
}
</script>

<style>

</style>
